<template>
  <div class="menu-wrapper">
    <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
      <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">轮播图</span>
    </div>
    <multi-upload v-model="form.productMeta.images"></multi-upload>
    <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
      <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">视频介绍</span>
    </div>
    <video-upload v-model="form.productMeta.video"></video-upload>
    <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
      <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">图文介绍</span>
    </div>
    <tinymce v-model="form.content" :height="300"/>

    <el-button type="primary" style="margin-top: 30px"  :loading="clicked" @click="complete()">
      &nbsp&nbsp&nbsp&nbsp完 成&nbsp&nbsp&nbsp&nbsp
    </el-button>
  </div>
</template>
<style scoped>
  .menu-wrapper {
    margin: 15px;
  }
</style>
<script>
  import {EventBus} from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import {save,find,update} from '@/api/productArticle'
  import MultiUpload from '@/components/Upload/multiUpload'
  import VideoUpload from '@/components/Upload/videoUpload'
  import Tinymce from '@/components/Tinymce'

  export default {
    name: 'product-index',
    filters: {},
    components: {
      MultiUpload, VideoUpload, Tinymce
    },
    data() {
      return {
        clicked: false, // 按钮防双击
        form: {
          id:'',
          goods:'',
          productMeta: {
            images: [],
            video: '',
          },
          content: ''
        },
        flag:'save'
      }
    },
    created() {
      this.form.goods = this.$route.query.goods;
      find(this.$route.query.id).then(response => {
        console.log(response)
        if(utils.isNull(response.data.article)){
          this.flag = 'save'
        }else {
          this.flag = 'update';
          this.form.id = response.data.article.id;
          this.form.goods = response.data.article.goods;
          this.form.content = response.data.article.content;
          this.form.productMeta.images = response.data.article.productMeta.images;
          this.form.productMeta.video = response.data.article.productMeta.video;
        }
      }).catch(error => {
      })
    },
    methods: {
      complete(){
        if(this.flag == 'save'){
          this.saveProductArticle()
        }else {
          this.updateProductArticle()
        }
      },
      saveProductArticle() {
        const _this = this
        this.clicked = true
        save(_this.form).then(response => {
          console.log(response)
          _this.clicked = false
          _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
            _this.$router.push({
              path: '/product/list'
            })
          })// 关闭当前tab回到列表
        }).catch(error => {
          _this.clicked = false

        })
      },
      updateProductArticle() {
        const _this = this
        this.clicked = true
        update(_this.form).then(response => {
          console.log(response)
          _this.clicked = false
          _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
            _this.$router.push({
              path: '/product/list'
            })
          })// 关闭当前tab回到列表
        }).catch(error => {
          _this.clicked = false

        })
      }
    }
  }
</script>
